<template>
  <div class="wrapper">
    <div class="container" v-if="!isResult">
      <img :src="totalPic.index2" alt>
      <img class="cake" v-tap="gameBtn" :src="cakeUrl" alt>
      
      <img class="dai" :src="totalPic.dai" alt>

      <count-down :countTime="countTime" :width="widthFa" class="count-down"></count-down>

      <scroll class="scroll-component"></scroll>

      <toast v-if="isToast" :status="isToast" :finishGameTime="finishTime" :on-close="closeItToast"></toast>

      <div>
        <img class="start-btn" v-if="isBtn" @click="startBtn" :src="totalPic.start" alt>
        <img class="gameing-btn" style="cursor:pointer;" v-else v-tap="gameBtn" :src="totalPic.start" alt>
        <img class="spoon active" v-tap="gameBtn" ref="refSpoon" style="animation-duration:0s;cursor:pointer;" :src="totalPic.shaozi" alt>

        <div class="share" @click="shareFriend"></div>
        <div v-if="isObtain" class="has-obtain"></div>
        <div v-if="isTeamObtain" class="has-team-obtain"></div>
      </div>

      <div class="share-btn" @click="shareBtn">
        <img :src="totalPic.share_btn" alt>
      </div>
    </div>

    <result v-else showStatu="3" :isTeamObtain="isTeamObtain" :isObtain="isObtain"></result>
  </div>
</template>

<script>
import { filterPic } from "../apis/utils.js";
import scroll from "./scroll";
import toast from "./toast";
import result from "./result";
import countDown from "./countDown";
import { eatOverCake } from "../apis/apis.js";
export default {
  data() {
    return {
      clicknum: 25, // 用户点击次数
      msNum: 0, // 记录次数
      isBtn: true,
      isPlayGame: false, // 判断用户是否在游戏中
      isResult: false,
      widthFa: "90%",
      widthBackup: "90%",
      countTime: "6.00", // 倒计时
      isToast: 0, // 需要弹窗显示
      isObtain: 0, // 已获得 弹窗
      isTeamObtain: 0, // 队员 获得奖励
      cakeUrl: "", // 蛋糕图片链接发生变化
      finishTime: 0,
      userInfo: window.params.userInfo
    };
  },

  created() {
    const imgUrl = {
      index2: "2.jpg",
      dai: "dai.gif",
      start: "start.png",
      cake1: "cake1.png",
      cake: "cake.png",
      share_btn: "share_btn.png",
      shaozi: "shaozi.gif"
    };
    this.totalPic = filterPic(imgUrl);
    this.cakeUrl = this.totalPic.cake1;
    console.log(this.totalPic.cake1);

    // console.log(window.params.userInfo);
    // this.userInfo.captain = 0; // 是否是队长
  },

  methods: {
    // 点击开始游戏
    startBtn() {
      var that = this;
      this.isBtn = false;
      this.$refs.refSpoon.style.webkitAnimationDuration = "2s";

      this.timeReduce();
      this.changeCpoonTime();
      this.cakeUrl = this.totalPic.cake;

      setTimeout(() => {
        that.isPlayGame = true;
      }, +that.countTime * 1000);
    },

    // 游戏中，点击次数减少
    gameBtn() {
      if (this.isPlayGame || this.clicknum <= 0) {
        this.$refs.refSpoon.style.webkitAnimationDuration = "0s";
        this.$vux.toast.text(`您点击了${this.clicknum}次`, "top");
        return;
      }

      this.clicknum = this.clicknum - 1;
      this.msNum++;
    },

    /**
     * 倒计时秒数减少
     * 倒计时为0  结果处理
     */
    timeReduce() {
      this.countTime = String(parseInt(+this.countTime * 100 - 1) / 100);
      this.widthFa = +this.widthFa.replace("%", "") - 0.15 + "%";
      // 游戏时间截止，显示弹窗，发送请求

      if (this.clicknum <= 0) {
        // 用户规定时间内，完成游戏
        this.$refs.refSpoon.style.webkitAnimationDuration = "0s"; // 勺子停止运动

        if (!window.params.userInfo.eatCake) {
          // 用户没吃过蛋糕

          this.isObtain = 1;
          this.finishTime = ((600 - +this.countTime * 100) / 100).toFixed(2);
          // 如果是队长，则只显示 已获得 第一个
          if (this.userInfo.captain == 0 || this.userInfo.captain == 1) {
            this.isToast = 4;
          } else {
            this.isToast = 2;
            this.isTeamObtain = 1; // 获得第二个劵 （captain 是队员）
          }
          eatOverCake(self.params.personInfo.user_id).then(({ data }) => {
            console.log(data);
          });
        }
        return;
      } else {
        if (this.countTime <= 0) {
          // 6s时间走完，没有通过游戏， isToast =1 为 再来一次；
          this.$refs.refSpoon.style.webkitAnimationDuration = "0s"; // 勺子停止运动
          this.isToast = 1;
          return;
        }
      }

      setTimeout(() => {
        this.timeReduce();
      }, 10);
    },

    /**
     * 500ms内，改变勺子的移动时间
     */

    changeCpoonTime() {
      if (this.msNum < 3) {
        // this.$refs.refSpoon.style.webkitAnimationDuration = "1s";
      } else if (this.msNum < 5 && this.msNum >= 3) {
        this.$refs.refSpoon.style.webkitAnimationDuration = ".8s";
      } else {
        this.$refs.refSpoon.style.webkitAnimationDuration = ".5s";
      }

      setTimeout(() => {
        this.changeCpoonTime();
        this.msNum = 0;
      }, 500);
    },

    /**
     * 子组件返回值，返回函数
     */
    closeItToast(e) {
      // if (true) {

      if (e == 1) {
        // 重新开始一局
        this.isToast = 0;
        this.isBtn = true;
        this.isPlayGame = false;
        this.countTime = "6.00";
        this.clicknum = 15;
        this.widthFa = this.widthBackup;
      } else if (e == 2) {
        // 返回为2， 第一次弹窗消失后，继续弹窗
        this.isToast = 3;
      } else if (e == 5) {
        // 返回为2， 第一次弹窗消失后，继续弹窗
        // this.isToast = 3;
        this.isToast = 0;
      } else {
        this.isResult = 1;
        this.isToast = 0;
      }
    },

    shareFriend() {
      //分享页面
      setTimeout(function() {
        share("哎哟有型周年庆", "吃蛋糕玩游戏，邀请朋友一起赢iPhone", "");
      }, 300);
    },

    shareBtn() {
      //分享页面
      setTimeout(function() {
        share("哎哟有型周年庆", "吃蛋糕玩游戏，邀请朋友一起赢iPhone", "");
      }, 300);
    }
  },

  components: {
    toast,
    result,
    scroll,
    countDown
  }
};
</script>
<style lang="less" scoped>
@import "../assets/common";
.container {
  position: relative;
}
.start-btn {
  position: absolute;
  z-index: 9;
  top: 6.2rem;
  left: 3rem;
  width: 1.17rem;
  height: 1.17rem;
}
.gameing-btn {
  position: absolute;
  z-index: 9;
  top: 7.2rem;
  left: 3rem;
  width: 1.27rem;
  height: 1.17rem;
}

.cake {
  position: absolute;
  z-index: 6;
  top: 5.3rem;
  right: 0.1rem;
  width: 2.89rem;
  height: 2.71rem;
}

.count-down {
  position: absolute;
  top: 4.45rem;
  left: 4.68rem;
  // margin-top: .05rem;
  // right: 6.18rem;
}
.scroll-component {
  position: absolute;
  top: 3.17rem;
  left: 3rem;
  font-size: 0.28rem;
}

.spoon {
  position: absolute;
  z-index: 8;
  top: 5.5rem;
  left: 4.5rem;
  width: 2rem;
  height: 2rem;
  animation: mymove1 ease-in-out infinite;
}

.has-obtain {
  position: absolute;
  z-index: 1;
  bottom: 0.3rem;
  left: 1.4rem;
  width: 1.37rem;
  height: 1.37rem;
  background: url(../../../../assets/images/celebration/icon/obtain.png)
    no-repeat;
  background-size: contain;
}
.has-team-obtain {
  position: absolute;
  z-index: 1;
  bottom: 0.3rem;
  left: 4rem;
  width: 1.37rem;
  height: 1.37rem;
  background: url(../../../../assets/images/celebration/icon/obtain.png)
    no-repeat;
  background-size: contain;
}

@keyframes mymove1 {
  0% {
    left: 4.5rem;
  }
  100% {
    left: 3rem;
  }
}

.share {
  position: absolute;
  right: 1rem;
  bottom: 0.4rem;
  z-index: 6;
  width: 3.28rem;
  height: 1.8rem;
}

.share-btn {
  position: absolute;
  top: 0.08rem;
  right: 0;
  width: 1.46rem;
}
</style>


